<!--
 * @Author: Mark
 * @Date: 2019-01-30 10:48:19
 * @LastEditors: Mark
 * @LastEditTime: 2019-01-30 10:56:34
 * @Description: 折线图测试类
 -->
<template>
  <div>
    <my-header></my-header>
    
    <div id="line" style="width: 600px;height:400px;">
      折线图测试
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/Header";
import LineChart from "@/components/myChart/LineChart";
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "line",

            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "line",

            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "直接访问",
            type: "line",

            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "搜索引擎",
            type: "line",

            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    };
  },
  components: {MyHeader},
  mounted() {
    this.initLine();
  },
  methods: {
    initLine() {
      //自定义模拟属性
      let legend = ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"];
      let xAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      let series = [
        [120, 132, 101, 134, 90, 230, 210],
        [120, 133, 101, 134, 90, 230, 210],
        [120, 132, 102, 134, 90, 230, 210],
        [120, 132, 105, 134, 90, 230, 210],
        [120, 132, 101, 136, 90, 230, 210]
      ];

      //请求封装的组件的工具类，获取option属性值
      const option = LineChart.getLineChartOption(legend, xAxis, series);
      let sourceWebChart = vue.$echarts.init(document.getElementById("line"));
      sourceWebChart.setOption(option);

      //let vue = this;
      //sourceWebChart.setOption(option);
    }
  }
};
</script>

<style >
</style>
